import { createContext, useReducer } from "react";
import ReducerComponent from ".";
import IndexBrother from "./indexBrother";

interface State {
  count: number;
}

interface Action {
  type: "increment" | "decrement" | "reset";
}

export function reducer(state: State, action: Action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
    default:
      throw new Error("Unexpected action type");
  }
}

export const CounterContext = createContext({
  state: { count: 0 },
  dispatch: () => null,
});

function IndexFather() {
    console.log("IndexFather");
  // 使用 useReducer 初始化状态和 dispatch 函数
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      {/* <ReducerComponent state={state} dispatch={dispatch}/>
      <IndexBrother state={state} dispatch={dispatch}/> */}
      <CounterContext.Provider value={{ state, dispatch }}>
        <ReducerComponent />
        <IndexBrother />
      </CounterContext.Provider>
    </div>
  );
}

export default IndexFather;
